<template>
    <div class="learning-platform">
        <mt-header fixed :title="name">
            <router-link to="/learningPlatform" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="platform-body">
            <div class="datum-item" v-for="(item, index) in dataList" :key='index'>
                <div v-if="isAndroid && !item.isPic" @click="clickitem(item)">
                    <img class="algin-top" src="../assets/image/icon_book.png" />
                    <div class="datum-item-content">{{item.name}}</div>
                    <mt-button type="primary" size="small" class="datum-item-right">查看</mt-button>
                </div>
                <a v-else style="display: block;" @click='clickitemA(item)'>
                    <img class="algin-top" src="../assets/image/icon_book.png" />
                    <div class="datum-item-content">{{item.name}}</div>
                    <button class="datum-item-right">查看</button>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
import app from '~/assets/api/config'
import os from '~/assets/api/os'
export default {
    components: {
        //[InfiniteScroll.name]: InfiniteScroll
    },
    data() {
        return {
            dataList: [],
            page: {
                size: 10,
                currentPage: 1
            },
            userinfodata: [], //个人信息
            id: '',
            name: '',
            total: 0,
            flag: false,
            isAndroid: os.isAndroidLxkApp(),
            isLxkIOS: os.isIosLxkApp()
        }
    },
    created() {
        const { id, name } = this.$route.query
        this.id = id
        this.name = name
        this.getuserinfo()
        this.getStartList()
    },
    mounted() {
        window.scrollTo(0, 0)

        window.addEventListener(
            'popstate',
            function(e) {
                // alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
                if (localStorage.getItem('learn') > 0) {
                    localStorage.removeItem('learn')
                    window.location.reload()
                }
            },
            false
        )
        window.addEventListener('scroll', this.getList)
    },
    methods: {
        getuserinfo() {
            //获取个人信息
            this.$axios
                .get(`${app.API_BES_URL}/api/backend/v1/member/getInfo`)
                .then(res => {
                    if (res.data.code == 0) {
                        this.userinfodata = res.data.data
                    }
                })
        },
        clickitemA(item) {
            localStorage.setItem('learn', '1')
            this.postAppMassge(item)
            window.location.href = item.file_url
        },
        clickitem(item) {
            localStorage.setItem('learn', '1')
            this.postAppMassge(item)
            try {
                if (this.isAndroid) {
                    window.control.openFile(item.file_url) //JSON.stringify(arrayObj)
                }
            } catch (err) {}
        },
        postAppMassge(item) {
            var obj = {
                username: this.userinfodata.name,
                userid: this.userinfodata.id ? this.userinfodata.id : '',
                filename: item.name
            }
            try {
                if (this.isLxkIOS) {
                    console.log(obj)
                    window.webkit.messageHandlers.set_seefiletimes.postMessage(
                        JSON.stringify(obj)
                    )
                }
            } catch (err) {}
        },
        getStartList() {
            // 获取订单列表
            this.$axios
                .get(`${app.API_BES_URL}/api/backend/v1/study/file_lists`, {
                    params: {
                        document_id: this.id,
                        page_num: 1,
                        page_limit: this.page.size
                    }
                })
                .then(res => {
                    if (res && res.data.code == 0) {
                        var array = res.data.data.list
                        array = array.map(obj => {
                            if (
                                obj.format == 'png' ||
                                obj.format == 'jpg' ||
                                obj.format == 'jpeg'
                            ) {
                                obj.isPic = true
                            } else {
                                obj.isPic = false
                            }
                            return obj
                        })
                        this.dataList = [...this.dataList, ...array]
                        this.flag = true
                    }
                })
        },
        getList() {
            let scrollTop =
                document.body.scrollTop - document.documentElement.scrollTop > 0
                    ? document.body.scrollTop
                    : document.documentElement.scrollTop
            let scrollHeight =
                document.body.scrollHeight -
                    document.documentElement.scrollHeight >
                0
                    ? document.body.scrollHeight
                    : document.documentElement.scrollHeight
            let clientHeight =
                document.body.clientHeight -
                    document.documentElement.clientHeight >
                0
                    ? document.body.clientHeight
                    : document.documentElement.clientHeight
            if (
                document.documentElement.clientHeight + scrollTop >=
                scrollHeight
            ) {
                if (this.flag) {
                    this.page.currentPage = this.page.currentPage + 1
                    this.$axios
                        .get(
                            `${
                                app.API_BES_URL
                            }/api/backend/v1/study/file_lists`,
                            {
                                params: {
                                    document_id: this.id,
                                    page_num: this.page.currentPage,
                                    page_limit: this.page.size
                                }
                            }
                        )
                        .then(res => {
                            if (res && res.data.code == 0) {
                                var array = res.data.data.list
                                array = array.map(obj => {
                                    if (
                                        obj.format == 'png' ||
                                        obj.format == 'jpg' ||
                                        obj.format == 'jpeg'
                                    ) {
                                        obj.isPic = true
                                    } else {
                                        obj.isPic = false
                                    }
                                    return obj
                                })
                                this.dataList = [...this.dataList, ...array]
                                if (
                                    res &&
                                    res.data &&
                                    res.data.data.list.length < this.page.size
                                ) {
                                    this.flag = false
                                    this.$Toast({
                                        message: '已经全部加载',
                                        position: 'bottom',
                                        duration: 1000
                                    })
                                }
                            }
                        })
                }
            }
        }
    }
}
</script>
<style lang='less' scoped>
.learning-platform {
    min-height: 176px;
    .platform-body {
        .datum-item {
            margin-top: 10px;
            background-color: #fff;
            padding: 56.25px 0 56.25px 30px;
            position: relative;
            line-height: 38px;
            &:nth-of-type(1) {
                margin-top: 0;
            }
            .algin-top {
                width: 36px;
                height: 36px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 18.75px;
            }
            .datum-item-content {
                width: 462.5px;
                vertical-align: middle;
                margin-left: 45px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                font-size: 28px;
                /* autoprefixer: on */
            }
            .datum-item-right {
                /* float: right; */
                transform: translate(-50%, -50%);
                position: absolute;
                right: -12.5px;
                top: 50%;
                width: 120px;
                color: #1d0f00;
                height: 50px;
                line-height: 50px;
                border: 0;
                border-radius: 62.5px;
                font-size: 25px !important;
                outline: none;
                filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFDF00',endColorStr='#FFCD00',gradientType='1');
                background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
                background: -o-linear-gradient(left, #ffdf00, #ffcd00);
                background: -webkit-gradient(
                    linear,
                    0% 0%,
                    100% 0%,
                    from(#ffdf00),
                    to(#ffcd00)
                );
            }
            .datum-item-right:active {
                filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ECC111',endColorStr='#E6C022',gradientType='1');
                background: -moz-linear-gradient(left, #ecc111, #e6c022);
                background: -o-linear-gradient(left, #ecc111, #e6c022);
                background: -webkit-gradient(
                    linear,
                    0% 0%,
                    100% 0%,
                    from(#ecc111),
                    to(#e6c022)
                );
            }
        }
    }
}
</style>
